<template>
	<view>
		<!-- 书架 -->
		<!-- 自定义导航 -->
		<uni-nav-bar
			fixed
			:height="48"
			:border="false"
			statusBar
			backgroundColor="#fceeeb"
			rightIcon="more-filled" statusBar
		>
			<view class="tableft" slot="left">书架</view>
		</uni-nav-bar>
		<view
			style="background: url(../../static/selfbgc.png) no-repeat;background-size: 200%;background-position: center;padding-bottom: 20rpx;"
		>
			<!-- 搜索框 -->
			<uni-search-bar
				radius="18"
				placeholder="搜索书名、作者、关键字"
				bgColor="#fff"
				@focus="goTo()"
				cancelButton="none"
			/>
			<!-- 推荐 -->
			<view class="topcom container">
				<!-- 小说推荐 -->
				<view>
					<image src="../../static/cover.jpg" mode="widthFix" class="cover"></image>
					<view>
						<view>亲密关系</view>
						<view>作者·心理</view>
						<view>
							<uni-rate :value="9.5 | rate" :touchable="false" readonly allowHalf size="16"></uni-rate>
							<view>9.5分</view>
						</view>
					</view>
				</view>
				<!-- 签到记录 -->
				<view>
					<view>已签到</view>
					<view>{{isLogin? user.days:0}}天</view>
					<view class="tabright" @click="switchTo()">
						<image style="width: 34rpx;" src="../../static/topjinbi.png" mode="widthFix"></image>
						<view>领金币</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 通告栏 -->
		<uni-notice-bar
			single
			scrollable
			:speed="50"
			text="连续签到七天免费得金币,免广告"
			backgroundColor="#fff"
			color="#999"
			showIcon
		></uni-notice-bar>
		<!-- 结束 -->
		<!-- 书架书籍 -->
		<!-- 书架为空/用户未登录 -->
		<view v-if="!isLogin">
			<view style="width: 100%;text-align: center; font-size: 40rpx;margin: 240rpx 0;">
				登陆后查看书架图书
			</view>
		</view>
		<view v-else-if="!bookshelf">
			<image src="../../static/book-blank.png" style="width: 100%;" mode="widthFix"></image>
			<view style="width: 100%;text-align: center;font-weight: 600; font-size: 40rpx;margin: 20rpx 0;">
				您还没有添加任何书籍哦~
			</view>
		</view>

		<!-- 书架不为空 -->
		<uni-grid v-else :column="3" :square="false" :highlight="false" :showBorder="false" @change="detail($event)">
			<uni-grid-item v-for="(item, index) in bookshelf" :key="index" :index="item[0].id">
				<view style="margin: 20rpx auto;width: 80%;">
					<image
						:src="item[0].cover"
						style="box-shadow: 0 2px 4px 0 rgb(0 0 0 / 10%);width: 100%;border-radius: 10rpx;"
						mode="widthFix"
					></image>
					<view style="margin-left: 10rpx;">
						<view class="line-clamp">{{ item[0].name }}</view>
						<view class="line-clamp" style="color: #999;font-size: 26rpx;">更新至{{ item[0].lastChapter }}</view>
					</view>
				</view>
			</uni-grid-item>
			<uni-grid-item></uni-grid-item>
		</uni-grid>
		<!-- 结束 -->
	</view>
</template>

<script>
import { mapState } from 'vuex';
export default {
	data() {
		return {
			bookshelf: null
		};
	},
	computed: {
		...mapState(['user','isLogin'])
	},
	methods: {
		detail(e) {
			// console.log(e.detail.index)
			this.toDetail(e.detail.index);
		},
		// 跳转图书详情页面
		toDetail(id) {
			uni.navigateTo({
				url: `/pages/bookDetail/bookDetail?id=${id}`
			});
		},
		goTo() {
			uni.navigateTo({
				url: '/pages/search/search'
			});
		},
		// 跳转到tab页 fuli
		switchTo() {
			uni.switchTab({
				url: '../fuli/fuli'
			});
		},
		// 如果用户登录 获取用户书架
		getBookshelf(uid) {
			if (this.isLogin) {
				uni.request({
					url: `${getApp().globalData.baseURL}/v1/user/bookshelf/${uid}`,
					success: res => {
						console.log(res);
						if (res.data.code == 200) {
							this.bookshelf = res.data.data;
						}
					}
				});
			}
		}
	},
	onShow() {
		if(this.isLogin)this.getBookshelf(this.user.id);
	},
	filters: {
		rate: function(value) {
			return (value / 10) * 5;
		}
	}
};
</script>

<style lang="scss" scoped>
.line-clamp {
	width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
// 自定义导航栏
.tableft {
	font-size: 42rpx;
	font-weight: 600;
}
// 搜索框
.uni-searchbar {
	padding-bottom: 0;
}
// 搜索框 文字位置
/deep/.uni-searchbar__box {
	justify-content: flex-start;
	height: 56rpx;
}
// 图书封面
.cover {
	width: 150rpx;
	border-radius: 0 10rpx 10rpx 0;
}
// 顶部小说推荐及签到详情
.topcom {
	display: flex;
	justify-content: space-between;
	padding: 30rpx;
	> view:first-child {
		display: flex;
		> image {
			transform: rotateY(15deg);
			box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
		}
		> view {
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			margin-left: 20rpx;
			padding: 16rpx 0;
			> view:first-child {
				font-weight: 600;
				font-size: 32rpx;
			}
			> view:nth-child(2) {
				color: #999;
			}
			> view:last-child {
				display: flex;
				justify-content: space-between;
				align-items: center;
				> view:last-child {
					color: #feb200;
					margin-left: 20rpx;
				}
			}
		}
	}
	> view:last-child {
		padding: 20rpx 0;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
		> view:first-child {
			font-size: 26rpx;
			color: #999;
		}
		> view:nth-child(2) {
			font-weight: 600;
			color: #fe3502;
			font-size: 34rpx;
		}
		.tabright {
			width: 80%;
			padding: 4rpx 16rpx;
			// background-color: #f1f1f1;
			background-color: #fc7c5c;
			background-image: linear-gradient(0deg, #fc7c5c 0%, #ef384b 34%);
			border-radius: 60rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			> view {
				color: #fff;
				// font-weight: 600;
				font-size: 28rpx;
			}
		}
	}
}
// 通告栏
/deep/.uni-noticebar {
	border-radius: 42rpx;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
	margin: 20rpx;
	margin-top: -20rpx;
	width: 710rpx;
}
</style>
